import React  from 'react';

import Header from './components/TodoList/Header';
import Footer from './components/TodoList/Footer';
import List from './components/TodoList/List';

import Count from './components/Count';

import './App.css';


class App extends React.Component {

  state = {todoList: [
    {
      id: 1,
      name: '吃饭',
      done: false
    },
    {
      id: 2,
      name: '睡觉',
      done: true
    },
    {
      id: 3,
      name: '写代码',
      done: false
    },
  ]}

  /* 用于添加一个todo，参数是todo对象 */ 
  addTodo = (todo) => {
    const { todoList } = this.state;
    const newTodos = [todo, ...todoList];
    this.setState({
      todoList: newTodos
    })
  }

  /* 用于修改todo状态 */ 
  updateTodo = (id, done) => {
    const { todoList } = this.state;
    const newTodos = todoList.map( todo => {
      if(todo.id === id) {
        return {...todo, done};
      }else {
        return todo;
      }
    })

    this.setState({
      todoList: newTodos
    })
  }

  /* 用于删除一条todo */ 
  removeTodo = (id) => {
    const { todoList } = this.state;
    const newTodos = todoList.filter( todo => {
      return todo.id !== id
    })
    this.setState({
      todoList: newTodos
    })
  }

  /* 全选 */ 
  checkAllTodo = (done) => {
    const { todoList } = this.state;
    const newTodos = todoList.map(todo => {
      return {...todo, done}
    })
    this.setState({
      todoList: newTodos
    })
  }

  /* 清除已完成任务 */ 
  clearTodo = () => {
    const { todoList } = this.state;
    const newTodos = todoList.filter(todo => {
      return todo.done !== true
    })
    this.setState({
      todoList: newTodos
    })
  }

  render() {
    const { todoList } = this.state;

    return (
      <div className="App">
        <Header addTodo = { this.addTodo }/>
        <List 
          todoList = { todoList } 
          removeTodo = { this.removeTodo }
          updateTodo = { this.updateTodo }
        />
        <Footer 
          todoList = { todoList }
          checkAllTodo = { this.checkAllTodo }
          clearTodo = { this.clearTodo }
        />

        <Count />
      </div>
    );
  }
}

export default App;
